<template>
	<view class="page">
		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 教练信息卡片 -->
			<view class="coach-card">
				<view class="coach-info">
					<image class="coach-avatar" :src="coachAvatar" mode="aspectFill"></image>
					<view class="coach-detail">
						<view class="coach-name-wrap">
							<text class="coach-name">陈教练</text>
							<uni-icons type="contact" size="20" color="#3b82f6"></uni-icons>
						</view>
						<text class="coach-phone">电话：138 **** 5678</text>
						<view class="coach-tag">
							<text class="tag-text">教龄 5 年</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 搜索和筛选区 -->
			<view class="search-section">
				<view class="search-wrap">
					<input type="text" v-model="searchText" placeholder="搜索课程" @input="onSearch" />
				</view>
				<view class="filter-wrap">
					<view class="view-toggle">
						<view v-for="(view, index) in viewOptions" :key="index"
							:class="['toggle-btn', currentView === view.value? 'active' : '']"
							@click="currentView = view.value">
							<text>{{ view.label }}</text>
						</view>
					</view>
					<!-- <select v-model="courseType">
						<option v-for="type in courseTypes" :value="type.value">{{ type.label }}</option>
					</select> -->
				</view>
			</view>

			<view class="course-list" v-if="currentView === 'list'">
				<view v-for="(course, index) in courseList" :key="index" class="course-item">
					<view class="course-main">
						<view class="course-time">
							<text class="time-tag">{{ course.date }} {{ course.weekday }}</text>
							<text class="period-tag">{{ course.time }}</text>
						</view>
						<text class="course-name">{{ course.name }}</text>
						<view class="course-tags">
							<view class="info-tag">
								<uni-icons type="file" size="14" color="#666"></uni-icons>
								<text>{{ course.classId }}</text>
							</view>
							<view class="info-tag purple">
								<uni-icons type="person" size="14" color="#9333ea"></uni-icons>
								<text>{{ course.className }}</text>
							</view>
							<view class="info-tag amber">
								<uni-icons type="staff" size="14" color="#d97706"></uni-icons>
								<text>{{ course.coachName }}</text>
							</view>
						</view>
					</view>
					<view class="course-status">
						<text :class="['status-tag', course.status === '已签到'? 'signed' : 'unsigned']">
							{{ course.status }}
						</text>
						<view class="attendance">
							<text>应到 {{ course.expectedCount }} 人</text>
							<text>实到 {{ course.actualCount || 0 }} 人</text>
							<text>假 {{ course.actualCount || 0 }} 人</text>
						</view>
					</view>
				</view>
			</view>

			<view class="calendar-view" v-else>
				<view class="calendar-header">
					<view class="calendar-title">
						<text class="month-text">{{ currentMonthText }}</text>
						<text class="attendance-text">已签到 18 / 总课时 45</text>
					</view>
					<view class="calendar-nav">
						<view class="nav-btn" @click="previousMonth">
							<uni-icons type="left" size="16" color="#666"></uni-icons>
						</view>
						<view class="nav-btn" @click="nextMonth">
							<uni-icons type="right" size="16" color="#666"></uni-icons>
						</view>
					</view>
				</view>

				<view class="calendar-grid">
					<view class="weekday-row">
						<text v-for="day in weekDays" :key="day" class="weekday">{{ day }}</text>
					</view>
					<view class="date-grid">
						<view v-for="date in 31" :key="date" class="date-cell" @click="toggleDateSelection(date)">
							<view :class="['date-content', selectedDate === date? 'selected' : '']">
								<text class="date-number">{{ date }}</text>
								<view v-if="getCoursesCount(date)" class="date-dot"></view>
							</view>
							<view v-if="selectedDate === date && monthCourses[date]" class="course-popup">
								<view v-for="(course, idx) in monthCourses[date]" :key="idx" class="popup-course">
									<text class="popup-name">{{ course.name }}</text>
									<text class="popup-time">{{ course.time }}</text>
									<text class="popup-class">{{ course.classId }} {{ course.className }}</text>
									<text class="popup-date">日期：{{ date }}号</text>
									<view class="popup-footer">
										<view class="popup-count">
											<text>应 {{ course.expectedCount }} 人</text>
											<text>实 {{ course.actualCount || 0 }} 人</text>
											<text>假 {{ course.actualCount || 0 }} 人</text>
										</view>
										<text :class="['popup-status', course.status === '已签到'? 'signed' : 'unsigned']">
											{{ course.status }}
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coachAvatar: 'https://ai-public.mastergo.com/ai/img_res/f5b4573f9c5ec9a8ec19750486a5184d.jpg',
				searchText: '',
				currentView: 'list',
				courseType: '',
				viewOptions: [{
						label: '列表视图',
						value: 'list'
					},
					{
						label: '日历视图',
						value: 'calendar'
					}
				],
				courseTypes: [{
						label: '全部课程',
						value: 'all'
					},
					{
						label: '力量训练',
						value: 'strength'
					},
					{
						label: '有氧运动',
						value: 'cardio'
					},
					{
						label: '瑜伽',
						value: 'yoga'
					}
				],
				weekDays: ['日', '一', '二', '三', '四', '五', '六'],
				currentDate: new Date(),
				monthCourses: {
					15: [{
							name: '初级力量训练',
							time: '09:00-10:30',
							classId: 'ST001',
							expectedCount: 15,
							actualCount: 13,
							status: '已签到',
							className: '第一期'
						},
						{
							name: '瑜伽基础',
							time: '14:00-15:30',
							classId: 'YG001',
							expectedCount: 12,
							actualCount: 0,
							status: '未开始',
							className: '第二期'
						}
					],
					20: [{
						name: '高强度循环训练',
						time: '10:00-11:30',
						classId: 'HI001',
						expectedCount: 10,
						actualCount: 8,
						status: '已签到',
						className: '第三期'
					}]
				},
				selectedDate: null,
				courseList: [{
						name: '初级力量训练',
						time: '09:00-10:30',
						date: '2024年1月15日',
						weekday: '周一',
						classId: 'ST001',
						expectedCount: 15,
						actualCount: 13,
						status: '已签到',
						className: '第一期',
						coachName: '陈教练'
					},
					{
						name: '进阶瑜伽',
						time: '11:00-12:30',
						date: '2024年1月15日',
						weekday: '周一',
						classId: 'YG002',
						expectedCount: 12,
						actualCount: 0,
						status: '未开始',
						className: '第二期',
						coachName: '王教练'
					},
					{
						name: '高强度循环训练',
						time: '14:00-15:30',
						date: '2024年1月16日',
						weekday: '周二',
						classId: 'HI003',
						expectedCount: 10,
						actualCount: 8,
						status: '已签到',
						className: '第三期',
						coachName: '李教练'
					},
					{
						name: '核心训练',
						time: '16:00-17:30',
						date: '2024年1月16日',
						weekday: '周二',
						classId: 'CR004',
						expectedCount: 8,
						actualCount: 0,
						status: '未开始',
						className: '第四期',
						coachName: '陈教练'
					}
				]
			};
		},
		computed: {
			currentMonthText() {
				return `${this.currentDate.getFullYear()}年${this.currentDate.getMonth() + 1}月`;
			}
		},
		methods: {
			previousMonth() {
				const newDate = new Date(this.currentDate);
				newDate.setMonth(newDate.getMonth() - 1);
				this.currentDate = newDate;
			},
			nextMonth() {
				const newDate = new Date(this.currentDate);
				newDate.setMonth(newDate.getMonth() + 1);
				this.currentDate = newDate;
			},
			getCoursesCount(date) {
				return this.monthCourses[date]?.length || 0;
			},
			toggleDateSelection(date) {
				if (this.selectedDate === date) {
					this.selectedDate = null;
				} else {
					this.selectedDate = date;
				}
			},
			onSearch() {
				console.log('搜索内容:', this.searchText);
			}
		}
	};
</script>
<style>
	page {
		height: 100%;
	}

	.page {
		min-height: 100%;
		background-color: #f9fafb;
		padding-bottom: 120rpx;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		z-index: 100;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.header-title {
		font-size: 32rpx;
		font-weight: 500;
		margin-left: 20rpx;
	}

	.content {
		padding: 20rpx 20rpx 0;
	}

	.coach-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.coach-info {
		display: flex;
	}

	.coach-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.coach-detail {
		margin-left: 32rpx;
		flex: 1;
	}

	.coach-name-wrap {
		display: flex;
		align-items: center;
	}

	.coach-name {
		font-size: 32rpx;
		font-weight: 500;
		margin-right: 16rpx;
	}

	.coach-phone {
		font-size: 28rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.coach-tag {
		margin-top: 16rpx;
	}

	.tag-text {
		background-color: #ebf5ff;
		color: #3b82f6;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 32rpx;
	}

	.search-section {
		margin-bottom: 32rpx;
	}

	.search-wrap {
		margin-bottom: 24rpx;
	}

	.filter-wrap {
		display: flex;
		gap: 16rpx;
		overflow-x: auto;
	}

	.view-toggle {
		display: flex;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 4rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.toggle-btn {
		padding: 12rpx 32rpx;
		border-radius: 32rpx;
		font-size: 28rpx;
		color: #666;
	}

	.toggle-btn.active {
		background-color: #3b82f6;
		color: #fff;
	}

	.course-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.course-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
	}

	.course-main {
		flex: 1;
	}

	.course-time {
		display: flex;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.time-tag {
		background-color: #f3f4f6;
		color: #666;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.period-tag {
		background-color: #ebf5ff;
		color: #3b82f6;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.course-name {
		font-size: 28rpx;
		font-weight: 500;
	}

	.course-tags {
		display: flex;
		gap: 16rpx;
		margin-top: 16rpx;
		flex-wrap: wrap;
	}

	.info-tag {
		display: flex;
		align-items: center;
		gap: 8rpx;
		background-color: #f3f4f6;
		color: #666;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.info-tag.purple {
		background-color: #f3e8ff;
		color: #9333ea;
	}

	.info-tag.amber {
		background-color: #fef3c7;
		color: #d97706;
	}

	.course-status {
		margin-left: 32rpx;
		text-align: right;
	}

	.status-tag {
		display: inline-block;
		padding: 8rpx 24rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.status-tag.signed {
		background-color: #dcfce7;
		color: #16a34a;
	}

	.status-tag.unsigned {
		background-color: #fef9c3;
		color: #ca8a04;
	}

	.attendance {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #666;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.calendar-view {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.calendar-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.calendar-title {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.month-text {
		font-size: 32rpx;
		font-weight: 500;
	}

	.attendance-text {
		font-size: 24rpx;
		color: #666;
	}

	.calendar-nav {
		display: flex;
		gap: 16rpx;
	}

	.nav-btn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.nav-btn:active {
		background-color: #f3f4f6;
	}

	.weekday-row {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 8rpx;
		margin-bottom: 8rpx;
	}

	.weekday {
		text-align: center;
		font-size: 24rpx;
		color: #666;
		padding: 16rpx 0;
	}

	.date-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 8rpx;
		position: relative;
	}

	.date-cell {
		position: relative;
	}

	.date-content {
		aspect-ratio: 1;
		border: 2rpx solid #e5e7eb;
		border-radius: 16rpx;
		padding: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.date-content.selected {
		border-color: #3b82f6;
		background-color: #ebf5ff;
	}

	.date-number {
		font-size: 24rpx;
		color: #666;
	}

	.date-dot {
		width: 8rpx;
		height: 8rpx;
		background-color: #3b82f6;
		border-radius: 50%;
		margin-top: 8rpx;
	}

	.course-popup {
		position: absolute;
		z-index: 10;
		left: 0;
		top: calc(100% + 16rpx);
		width: 480rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		border: 2rpx solid #e5e7eb;
		padding: 24rpx;
	}

	.popup-course {
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #e5e7eb;
	}

	.popup-course:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}

	.popup-name {
		font-size: 28rpx;
		font-weight: 500;
	}

	.popup-time,
	.popup-class,
	.popup-date {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.popup-count {
		display: flex;
		gap: 16rpx;
		font-size: 24rpx;
		color: #666;
	}

	.popup-status {
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
	}

	.popup-status.signed {
		background-color: #dcfce7;
		color: #16a34a;
	}

	.popup-status.unsigned {
		background-color: #fef9c3;
		color: #ca8a04;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx 32rpx;
		background-color: #fff;
		border-top: 2rpx solid #e5e7eb;
	}

	.add-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
	}
</style>